<template>
	<view class="content">
		<view class="first">
			<view class="tit1"><text class="tit">宝妈小情节体验</text></view>
			<image id="hyl" src="../../../static/mm.png" mode=""></image>
			<view v-for="(p,index) in plan.slice(pid,pid+1)" :key='index'>
				<view class="writer"><text>{{p.content}}</text></view>
				<view v-if="p.id==pid+1">
					<image class="hy" src="../../../static/hy.png" mode=""></image>
					<button class="btn1" @click="play(planAid,pid,p.id)"><text class="pist">{{p.planA}}</text></button>
					<button class="btn2" @click="play(planBid,pid,p.id)"><text class="pist">{{p.planB}}</text></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				plan: [{
						id: 1,
						planA: '当然，我在这方面蛮有经验！',
						planB: '虽然我自己第一次，不过，我很乐意和小丽一起成长，互相帮助',
						content: '　　恭喜大漂亮，你拥有了一个可爱的宝宝，邻居家小丽也与你同时生产，有了一个可爱的宝宝，但是因为是第一次当妈妈，很多事情比较生疏，就经常找你问问题，交流心得。',
					},
					{
						id: 2,
						planA: '真不好意思，我也第一次当妈妈，没有什么经验。',
						planB: '涨奶的时候，如果宝宝没吃完，记得把奶用吸奶器挤出来,免得堵在里面，过后不要忘了热敷哦。',
						content: '　　大漂亮，我还在坐月子，孩子真的好小，我都不敢抱他，害怕让他受伤，天天手忙脚乱的，喂奶也是，有时候宝宝没喝完，我总是胀痛，难受的睡不着。我该怎么办啊？',
					},

					{
						id: 3,
						planA: '对对对，我也是这种情况',
						planB: '一定要让家人帮你一起分担，宝宝可不是你一个人的。你也要记得注意调整自己的心情和作息哦。',
						content: '　　大漂亮，你最近感觉怎么样，啊啊啊，我要爆炸了，宝宝天天哭，这样也哭，那样也哭，我没睡过一个好觉，天哪，真想把孩子塞回去！我都老了好几岁了。',
					},
					{
						id: 4,
						planA:'呜呜呜~我家宝宝也是，喝完就吐，心疼',
						planB: '你可以延长宝宝的喂养时间间隔，每2-3小时喂养一次，每次喂养7-10分钟；其次，喂奶后将孩子竖起，用手轻拍其后背；建议不要一次喂得太多或太快，应该遵循少量多次的原理，喂完奶后及时拍嗝。',
						content: '　　大漂亮，宝宝都两个月大了，喂奶还是会出现时不时吐奶的情况，看起来真的好心疼，每次都很担心他，喝奶的时候挺很正常啊，就是不知道为什么喝了就吐。',
					},
					{
						id: 5,
						planA: '可以翻身了哦，我也要开始引导他翻身了。',
						planB: '三个月的宝宝确实可以开始学翻身了，他们现在已经开始对玩具比较关注。在教孩子翻身的时候，可以使用一些颜色鲜艳，趣味性比较强的玩具放在宝宝身体的一侧，诱使宝宝主动翻身。当他们翻不过去，也可以适当的帮帮他，让他适应一下。',
						content: '　　小漂亮，你家宝宝会翻身没有哇，我家宝宝已经三个月啦，网上说现在可以教宝宝翻身了，还不知道该怎么去引导宝宝呢。',
					},
					{
						id: 6,
						planA: 'emmm,要不再等一两个月？五个月有点小了',
						planB: '四个月开始就可以试着拉坐宝宝了，不过一定要轻轻的，让宝宝一点一点的适应，差不多六个月就可以坐稳当了。',
						content: '　　哈哈哈哈，我家宝宝五个月啦，现在看见什么都好奇，这会应该骨头比较硬了吧，是不是可以开始试着坐立了哟。好期待啊!',
					},
					{
						id: 7,
						planA: '我家宝宝也会站立啦',
						planB: '好棒，你家宝宝学得好快，我家宝宝现在虽然也会爬，但是站好像还差一点，慢慢教吧，天天把他提起来让他试试站着的感觉，不过可不敢让他试久了，免得伤到骨头。',
						content: '　　嘿嘿，宝宝已经学会四处爬了，成就感真的满满的，现在也快到一岁了，他也开始扶着东西跃跃欲试站起来了。这一路走来真是艰辛并幸福啊！',
					},
					{
						id: 8,
						planA: '可以稍微休息一下咯',
						planB: '养娃生涯真难忘啊，哈哈哈，去再看看养孩子的经验吧',
						content: '　　恭喜你们共同度过了宝妈阶段，拥有了一个健康的宝宝o(*￣▽￣*)ブ',
					}
				],
				pid: 0,
				planAid: 0,
				planBid: 1,
				name: '微信名称',
				wh:0,
			}
		},

		methods: {
			play(id, pid, p) {
				//第一个情节
				if (p == 1) {
					this.pid = p; //进入第一个情节
				}
				//第一个情节
				if (p == 2) {
					if (id == 0) {
						this.pid = p + 1; //进入第二个情节
					} else if (id == 1) {
						this.pid = p; //进入小助手答疑
					}
				}
				if (p == 3) {
					this.pid = p;
				}
				if (p == 4) {
					if (id == 0) {
						this.pid = p + 1;
					} else if (id == 1) {
						this.pid = p;
					}
				}
				if (p == 5) {
					this.pid = p;
				}
				if (p == 6) {
					this.pid = p;
				}
				if (p == 7) {
					this.pid = p;
				}
				if (p == 8) {
					if (id == 0) {
						uni.navigateBack({
							delta: 1
						})
					} else if (id == 1) {
						uni.navigateBack({
							delta: 1
						})
					}
				}

			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight
		}
	}
</script>

<style>
	.content {
		height:800px;
		/* background: rgba(255,192,203,0.2); */
		background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fupload-images.jianshu.io%2Fupload_images%2F4280347-e23a64cc42742e6a.jpeg&refer=http%3A%2F%2Fupload-images.jianshu.io&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656496134&t=8ab0bb0605437c49c7cbbb4a75d9a6af') no-repeat;
		background-size: 100% 100%;
	}
	#hyl{
		position: relative;
		left: 290px;
		width: 80px;
		height: 80px;
	}
	.first{
		position: relative;
		left: 20px;
		top: 20px;
		width: 90%;
		height:400px;
		/* border:4px solid rgba(255,255,255,0.6); */
	}
	.tit1{
		position: relative;
		top: -20px;
		left:80px;
		width: 200px;
		height: 40px;
		border-radius: 10px;
		border: 1px solid 	#ADD8E6;
		background-color: rgba(255,255,255,1);
	}
	.tit {
		position: relative;
		top: -15px;
		text-align: center;
		color: black;
		font-size: 18px;
		width: 100%;
		display: block;
		padding-top: 20px;
		/* color: 	#545454; */
	}
	
	.writer {
		margin-left: 10%;
		padding: 8px;
		width: 80%;
		background-color: rgba(255,255,255,0.9);
		/* background-color: rgba(230, 230, 250,0.7); */
		line-height: 34px;
		border-radius: 5%;
		font-size: 28rpx;
		letter-spacing: 1px;
		/* border: 1px solid white; */
		border: 1px solid 	#ADD8E6;
	}
	.btn1{
		position: absolute;
		top:420px;
		border-radius: 20px;
		line-height: 40px;
		border: 1px solid 	#ADD8E6;
		letter-spacing: 1px;
		left: 50px;
		background-color:rgba(255,255,255,0.8);
	}
	.btn2{
		position: absolute;
		left: 50px;
		top:520px;
		border-radius: 20px;
		line-height: 40px;
		border: 1px solid 	#ADD8E6;
		letter-spacing: 1px;
		background-color:rgba(255,255,255,0.8);
	}
	.hy{
		position: absolute;
		top: 340px;
		width: 80px;
		height: 80px;
		}
	.pist{
		font-size: 15px;
		color: black;
	}
</style>
